<template>
    <div class="container">
        <div class="xtx-bread">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/myc/indexs' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/' }">二级id</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/' }">分类id</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/' }">商品详情id</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="goods-info">
            <div class="media">
                <div class="goods-image">
                    <div class="large" v-show="showZoom" :style="zoomStyle"></div> <!--large为放大镜的背景图-->
                    <div class="middle"> <!--middle 里的img为镜片背景-->
                        <img :src="imageSrc" alt="" @mousemove="moveLens" @mouseleave="hideLens">
                        <div class="layer"></div> <!--滑块-->
                    </div>
                    <ul class="small">
                        <li v-for="item, index in list" :key="index" @mouseover="handleMouseOver(item.im)">
                            <img :src="item.im" alt="">
                        </li>
                    </ul>
                </div>
                <ul class="goods-sales">
                    <li>
                        <p>销量人气</p>
                        <p>200+</p>
                        <p>
                            <i class="iconfont icon-qizhi">销量人气</i>
                        </p>
                    </li>
                    <li>
                        <p>销量人气</p>
                        <p>200+</p>
                        <p>
                            <i class="iconfont icon-qizhi">销量人气</i>
                        </p>
                    </li>
                    <li>
                        <p>销量人气</p>
                        <p>200+</p>
                        <p>
                            <i class="iconfont icon-qizhi">销量人气</i>
                        </p>
                    </li>
                    <li>
                        <p>销量人气</p>
                        <p>200+</p>
                        <p>
                            <i class="iconfont icon-qizhi">销量人气</i>
                        </p>
                    </li>
                </ul>
            </div>
            <div class="spec">
                <p class="g-name">复古文艺宝宝格纹短袖衬衫73-110cm</p>
                <p class="g-desc">经典格纹，柔软舒适，清凉透气，小熊贴布，萌趣可爱</p>
                <p class="g-price">
                    <span>89.00</span>
                    <span>89.00</span>
                </p>
                <div class="g-service">
                    <div>
                        <dl>
                            <dt>促销</dt>
                            <dd>12月好物放送，App领券购买直降120元</dd>
                        </dl>
                    </div>
                    <div>
                        <dl>
                            <dt>配送</dt>
                            <dd>
                                <b>至</b>
                                <div class="xtx-city"></div>
                            </dd>
                        </dl>
                    </div>
                    <div>
                        <dl>
                            <dt>服务</dt>
                            <dd>
                                <span>无忧退货</span>
                                <span>快速退款</span>
                                <span>免费包邮</span>
                                <a href="javascript:;">了解详情</a>
                            </dd>
                        </dl>
                    </div>
                </div>
                <div class="goods-sku">
                    <dl>
                        <dt>尺码</dt>
                        <dd>
                            <span class="selected">100(建议2-3岁)</span>
                            <span>90(建议1-2岁)</span>
                            <span>80(建议9-18个月)</span>
                            <span>73(建议6-9个月)</span>
                            <span>110(建议3-4岁)</span>
                        </dd>
                    </dl>
                    <dl>
                        <dt>颜色</dt>
                        <dd>
                            <img class="selected" title="黄色格纹"
                                src="https://yanxuan-item.nosdn.127.net/547df2ed4ca020b7c62e97696ca4ae71.png" alt="">
                            <img title="浅咖格纹" src="https://yanxuan-item.nosdn.127.net/ec04a67082337555295297946180252d.png"
                                alt="">
                        </dd>
                    </dl>
                </div>
                <div class="xtx-numbox">
                    <div class="label">数量</div>
                    <div class="numbox">
                        <a href="javascript:;">-</a>
                        <input type="text" value="1">
                        <a href="javascript:;">+</a>
                    </div>
                </div>
                <button class="xtx-button ellipsis middle primary">加入购物车</button>
            </div>
        </div>
        <div class="goods-relevant">
            <div class="header">
                <i class="icon"></i>
                <span class="title">同类商品推荐</span>
            </div>
            <!-- 同类商品推荐 -->
            <div class="xtx-carousel">
                <el-carousel trigger="click" height="380px" :autoplay="false" arrow="always">
                    <el-carousel-item v-for="item,index in list" :key="index">
                        <ul class="fade">
                            <li>
                                <router-link to="/">
                                    <img :src="item.im" alt="">
                                    <p class="name ellipsis">复古文艺宝宝格纹短袖衬衫73-110cm</p>
                                    <p class="price">¥111.00</p>
                                </router-link>
                                <router-link to="/">
                                    <img :src="item.im" alt="">
                                    <p class="name ellipsis">复古文艺宝宝格纹短袖衬衫73-110cm</p>
                                    <p class="price">¥222.00</p>
                                </router-link>
                                <router-link to="/">
                                    <img :src="item.im" alt="">
                                    <p class="name ellipsis">复古文艺宝宝格纹短袖衬衫73-110cm</p>
                                    <p class="price">¥333.00</p>
                                </router-link>
                                <router-link to="/">
                                    <img :src="item.im" alt="">
                                    <p class="name ellipsis">复古文艺宝宝格纹短袖衬衫73-110cm</p>
                                    <p class="price">¥444.00</p>
                                </router-link>
                            </li>
                        </ul>

                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="goods-footer">
            <!-- 左侧 -->
            <div class="goods-article">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">商品详情</el-menu-item>
                    <el-menu-item index="2">商品</el-menu-item>
                </el-menu>
                <div class="goods-detail" v-show="activeIndex === '1'">
                    <ul class="attrs">
                        <li>
                            <span class="dt">品牌</span>
                            <span class="dd">网易严选推荐选品，本产品为威尔贝鲁品牌，由常州市威尔纺织品有限公司生产制作。</span>
                        </li>
                        <li>
                            <span class="dt">品牌</span>
                            <span class="dd">1-3岁、0-1岁、婴幼儿、新生儿</span>
                        </li>
                        <li>
                            <span class="dt">适用季节</span>
                            <span class="dd">四季</span>
                        </li>
                        <li>
                            <span class="dt">材质</span>
                            <span class="dd">纯棉</span>
                        </li>
                    </ul>
                    <img src="https://yanxuan-item.nosdn.127.net/02f44e7d6d4bd25e354155c6ecf6b086.jpg" alt="">
                </div>
                <div class="goods-comment" v-show="activeIndex === '2'">
                    <div class="head">
                        <div class="data">
                            <p>
                                <span>1306</span>
                                <span>人购买</span>
                            </p>
                            <p>
                                <span>94.56%</span>
                                <span>好评率</span>
                            </p>
                        </div>
                        <div class="tags">
                            <div class="dt">大家都在说：</div>
                            <div class="dd">
                                <a class="active" href="javascript:;">全部评价（832）</a>
                                <button class="active">有图（46）</button>
                                <button>音质好（34）</button>
                                <button>充电快（66）</button>
                                <button>材质很软（32）</button>
                                <button>性价比高（97）</button>
                            </div>
                        </div>
                    </div>
                    <div class="sort">
                        <span>排序</span>
                        <a class="act" href="javascript:;">默认</a>
                        <a href="javascript:;">最新</a>
                        <a href="javascript:;">最热</a>
                    </div>
                    <div class="liot">
                        <div class="item">
                            <div class="user">
                                <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/avatar_1.png" alt="">
                                <span>兔****y</span>
                            </div>
                            <div class="body">
                                <div class="score">
                                    <i style="color: #ff9240;" class="iconfont icon-star"></i>
                                    <span class="attr">颜色：白色 尺寸：10cm 产地：美国</span>
                                </div>
                                <div class="text">颜色好看，很重，做工略次一点，但也对的起这个价格了</div>
                                <div class="goods-comment-image">
                                    <div class="lis">
                                        <a href="javascript:;">
                                            <img src="https://yanxuan.nosdn.127.net/0f19c7edf5b78f4e94503bf74bc425e7.jpg?type=webp&imageView&quality=95&thumbnail=603x438" alt="">
                                        </a>
                                    </div>
                                </div>
                                <div class="time">
                                    <span>2021-04-03 13:20:32</span>
                                    <span class="zan">
                                        <i class="iconfont icon-dianzan"></i>94
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="xtx-pagination"></div>
                </div>
                <div class="goods-warn">
                    <h3>注意事项</h3>
                    <p class="tit">• 购买运费如何收取？</p>
                    <p> 单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p>
                    <br>
                    <p class="tit">• 使用什么快递发货?</p>
                    <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
                    <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>
                    <br>
                    <p class="tit">• 如何申请退货?</p>
                    <p> 1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
                    <p>2.内裤和食品等特殊商品无质量问题不支持退货；</p>
                    <p> 3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
                    <p> 4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。 </p>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="goods-aside">
                <div class="goods-hot">
                    <h3>24小时热销榜</h3>
                    <div>
                        <router-link to="/">
                            <img src="https://yanxuan-item.nosdn.127.net/605d71caa460e3c05cb2fd1b2885b9b4.jpg" alt="">
                            <p class="name ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="desc ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="price">¥99.00</p>
                        </router-link>
                        <router-link to="/">
                            <img src="https://yanxuan-item.nosdn.127.net/ca17e384dc1c005c24c06e1abfde6ab4.jpg" alt="">
                            <p class="name ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="desc ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="price">¥99.00</p>
                        </router-link>
                        <router-link to="/">
                            <img src="https://yanxuan-item.nosdn.127.net/f598065789526b53a8a67d7482a2f357.jpg" alt="">
                            <p class="name ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="desc ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="price">¥99.00</p>
                        </router-link>
                    </div>
                </div>
                <div class="goods-hot">
                    <h3>24小时热销榜</h3>
                    <div>
                        <router-link to="/">
                            <img src="https://yanxuan-item.nosdn.127.net/605d71caa460e3c05cb2fd1b2885b9b4.jpg" alt="">
                            <p class="name ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="desc ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="price">¥99.00</p>
                        </router-link>
                        <router-link to="/">
                            <img src="https://yanxuan-item.nosdn.127.net/ca17e384dc1c005c24c06e1abfde6ab4.jpg" alt="">
                            <p class="name ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="desc ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="price">¥99.00</p>
                        </router-link>
                        <router-link to="/">
                            <img src="https://yanxuan-item.nosdn.127.net/f598065789526b53a8a67d7482a2f357.jpg" alt="">
                            <p class="name ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="desc ellipsis">儿童字母纯棉POLO衫73-130cm</p>
                            <p class="price">¥99.00</p>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 商品详情
import { getgoodsid } from '@/request/api/myc/myc'
// 同类推荐
import { getrelevant } from '@/request/api/myc/myc'
// 热销推荐
import { getehot } from '@/request/api/myc/myc'
// 商品的评价信息
import { getevaluate } from '@/request/api/myc/myc'
// 评价分页数据
import { getpage } from '@/request/api/myc/myc'


export default {
    data() {
        return {
            activeIndex: '1',
            list: [
                {
                    im: require("@/assets/im/1.png")
                },
                {
                    im: require("@/assets/im/2.png")
                },
                {
                    im: require("@/assets/im/3.png")
                },
                {
                    im: require("@/assets/im/4.jpg")
                }
            ],
            imageSrc: 'https://yanxuan-item.nosdn.127.net/3d76d123061b1ba9bce10cda817f91b2.png',
            showZoom: false,
            zoomStyle: {
                backgroundImage: 'url(https://yanxuan-item.nosdn.127.net/3d76d123061b1ba9bce10cda817f91b2.png)',
                backgroundSize: '300% 300%',
                backgroundRepeat: 'no-repeat',
                position: 'absolute'
            },
            posX: 0,
            posY: 0
        }
    },
    mounted() {
        console.log(this.$route.query.id);

    },
    async created() {
        const id = this.$route.query.id
        const res = await getgoodsid(id)
        console.log("商品详情", res);

        const r1 = await getrelevant(id)
        console.log("同类推荐", r1);

        const r2 = await getehot(id)
        console.log("同类推荐", r2);

        const r3 = await getevaluate(id)
        console.log("商品的评价信息", r3);

        const r4 = await getpage(id)
        console.log("评价分页数据", r4);


    },
    methods: {
        moveLens(event) {
            this.posX = event.pageX;
            this.posY = event.pageY;
            this.showZoom = true;
            this.zoomStyle.backgroundPosition = `${-this.posX}px ${-this.posY}px`;
        },
        hideLens() {
            this.showZoom = false;
        },
        handleMouseOver(imageSrc) {
            this.imageSrc = imageSrc; // 更新放大镜和大图的内容
            this.zoomStyle.backgroundImage = `url(${imageSrc})`; // 更新放大镜的背景图
        },
        handleSelect(key, keyPath) {
            this.activeIndex=key
        console.log(key, keyPath);
      }
    }
}
</script>

<style lang="scss" scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}


:deep(.el-carousel__indicators--horizontal) {
    .el-carousel__button{
        display: inline-block;
        width: 12px;
        height: 12px;
        background: rgba(0,0,0,.2);
        border-radius: 50%;
        cursor: pointer;

    }
}
:deep(.el-carousel__indicator.is-active button) {
    background: #27ba9b;
}
:deep(.el-carousel__arrow--left){
    background: transparent;
}
:deep(.el-carousel__arrow--left:hover){
    background: transparent;
}
:deep(.el-icon-arrow-left){
    font-size: 30px;
    color: #ddd;
}
:deep(.el-carousel__arrow--right){
    background: transparent;
}
:deep(.el-carousel__arrow--right:hover){
    background: transparent;
}
:deep(.el-icon-arrow-right){
    font-size: 30px;
    color: #ddd;
}
:deep(.el-menu--horizontal .el-menu-item.is-active) {
    border-bottom: 4px solid #27ba9b;
}


.xtx-bread {
    // background:pink;
    display: flex;
    padding: 25px 10px;
}

.goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
        width: 580px;
        height: 600px;
        padding: 30px 50px;

        .goods-image {
            width: 480px;
            height: 400px;
            position: relative;
            display: flex;
            z-index: 200;

            .large {
                position: absolute;
                top: 0;
                left: 412px;
                width: 400px;
                height: 400px;
                box-shadow: 0 0 10px rgba(0, 0, 0, .1);
                // background-repeat: no-repeat;
                // background-size: 800px 800px;
                // background-color: #f8f8f8;
                // background-image: url(https://yanxuan-item.nosdn.127.net/3d76d12….png);
                // background-position: -400px 0px;
                // display: none;
            }

            .middle {
                width: 400px;
                height: 400px;
                background: #f5f5f5;
                position: relative;
                cursor: move;

                img {
                    max-width: 100%;
                    max-height: 100%;
                    vertical-align: middle;
                }

                .large {
                    width: 200px;
                    height: 200px;
                    background: rgba(0, 0, 0, .2);
                    left: 0;
                    top: 0;
                    position: absolute;
                }
            }

            .small {
                width: 80px;

                li {
                    width: 68px;
                    height: 68px;
                    margin-left: 12px;
                    margin-bottom: 15px;
                    cursor: pointer;

                    img {
                        max-width: 100%;
                        max-height: 100%;
                        vertical-align: middle;
                    }
                }

                li:hover {
                    border: 2px solid #27ba9b;
                }
            }
        }

        .goods-sales {
            display: flex;
            width: 400px;
            align-items: center;
            text-align: center;
            height: 140px;

            li {
                flex: 1;
                position: relative;


                p:first-child {
                    color: #999;
                }

                p:nth-child(2) {
                    color: #cf4444;
                    margin-top: 10px;
                }

                p:last-child {
                    color: #666;
                    margin-top: 10px;

                    i {
                        color: #27ba9b;
                        font-size: 14px;
                        margin-right: 2px;
                    }
                }
            }

            li:first-child:after {
                height: 0;
            }

            li:after {
                position: absolute;
                top: 10px;
                left: 0;
                height: 60px;
                border-left: 1px solid #e4e4e4;
                content: "";
            }
        }

    }

    .spec {
        flex: 1;
        padding: 30px 30px 30px 0;

        .g-name {
            font-size: 22px;
        }

        .g-desc {
            color: #999;
            margin-top: 10px;
        }

        .g-price {
            margin-top: 10px;

            span:first-child {
                color: #cf4444;
                margin-right: 10px;
                font-size: 22px;
            }

            span:last-child {
                color: #999;
                text-decoration: line-through;
                font-size: 16px;
            }

            span:before {
                content: "¥";
                font-size: 14px;
            }
        }

        .g-service {
            background: #f5f5f5;
            width: 500px;
            padding: 20px 10px 0 10px;
            margin-top: 10px;

            dl {
                padding-bottom: 20px;
                display: flex;
                align-items: center;

                dt {
                    width: 50px;
                    color: #999;
                }

                dd {
                    color: #666;

                    b {
                        vertical-align: middle;
                        padding-right: 5px;
                        font-weight: normal;
                    }
                }

                dd:last-child span {
                    margin-right: 10px;
                }

                dd:last-child a {
                    color: #27ba9b;
                }

                dd:last-child span:before {
                    content: "•";
                    color: #27ba9b;
                    margin-right: 2px;
                }
            }
        }

        .goods-sku {
            padding-left: 10px;
            padding-top: 20px;

            dl {
                display: flex;
                padding-bottom: 10px;
                align-items: center;

                dt {
                    width: 50px;
                    color: #999;
                }

                dd {
                    flex: 1;
                    color: #666;
                    line-height: 40px;

                    span {
                        display: inline-block;
                        height: 30px;
                        line-height: 28px;
                        padding: 0 20px;
                        border: 1px solid #e4e4e4;
                        margin-right: 10px;
                        cursor: pointer;
                    }

                    span.selected {
                        border-color: #27ba9b;
                    }

                    img {
                        width: 50px;
                        height: 50px;
                        margin-bottom: 5px;
                        border: 1px solid #e4e4e4;
                        margin-right: 10px;
                        cursor: pointer;
                    }

                    img.selected {
                        border-color: #27ba9b;
                    }
                }
            }
        }

        .xtx-numbox {
            display: flex;
            align-items: center;

            .label {
                width: 60px;
                color: #999;
                padding-left: 10px;
            }

            .numbox {
                width: 120px;
                height: 30px;
                border: 1px solid #e4e4e4;
                display: flex;

                a {
                    width: 29px;
                    line-height: 28px;
                    text-align: center;
                    background: #f8f8f8;
                    font-size: 16px;
                    color: #666;
                }

                input {
                    width: 60px;
                    padding: 0 5px;
                    text-align: center;
                    color: #666;
                }
            }
        }

        .xtx-button {
            appearance: none;
            outline: none;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 4px;
            cursor: pointer;
        }

        .middle {
            width: 180px;
            height: 50px;
            font-size: 16px;
        }

        .primary {
            border-color: #27ba9b;
            background: #27ba9b;
            color: #fff;
            margin-top: 20px;
        }
    }
}

.goods-relevant {
    background: #fff;
    min-height: 460px;
    margin-top: 20px;

    .header {
        height: 80px;
        line-height: 80px;
        padding: 0 20px;

        .icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            border-top: 4px solid #27ba9b;
            border-right: 4px solid #27ba9b;
            box-sizing: border-box;
            position: relative;
            transform: rotate(45deg);
        }

        .icon:before {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            left: 0;
            top: 2px;
            background: #bcf1e6;
        }
        .title{
            font-size: 20px;
            padding-left: 10px;
        }
    }
    .xtx-carousel{
        height: 380px;
        .fade{
            width: 100%;
            display: flex;
            justify-content: space-around;
            // padding: 0 40px;
            li{
                
                display: flex;
            a{
                width: 300px;
                text-align: center;
                img{
                    padding: 20px;
                    width: 230px!important;
                    height: 230px!important;
                    margin: 10px 0;
                }
                .name{
                    font-size: 16px;
                    color: #666;
                    padding: 0 40px;
                }
                .price{
                    font-size: 16px;
                    color: #cf4444;
                    margin-top: 15px;
                }
            }
        }
        }
    }
}
.goods-footer{
    display: flex;
    margin-top: 20px;
    // 右侧显示
    .goods-article{
        width: 940px;
        height: 800px;
        margin-right: 20px;
        // background: pink;
        background: #fff;
        .goods-detail{
            height: 800px;
            // background: red;
            padding: 40px;
            .attrs{
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 30px;
                li{
                    display: flex;
                    margin-bottom: 10px;
                    width: 50%;
                    .dt{
                        width: 100px;
                        color: #999;
                    }
                    .dd{
                        flex: 1;
                        color: #666;
                    }
                }
            }
        }

        .goods-warn{
            margin-top: 20px;
            background: #fff;
            padding-bottom: 40px;
            h3{
                height: 70px;
                line-height: 70px;
                border-bottom: 1px solid #f5f5f5;
                padding-left: 50px;
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 10px;
            }
            p{
                line-height: 40px;
                padding: 0 25px;
                color: #666;
            }
            .tit{
                color: #333;
            }
        }
    }
    .goods-comment{
            .head{
                display: flex;
                padding: 30px 0;
                .data{
                    width: 340px;
                    display: flex;
                    padding: 20px;
                    p{
                        flex: 1;
                        text-align: center;
                        span:first-child {
                            font-size: 32px;
                            color: #cf4444;
                        }
                        span:last-child {
                            color: #999;
                        }
                    }
                }
                .tags{
                    flex: 1;
                    display: flex;
                    border-left: 1px solid #f5f5f5;
                    .dt{
                        font-weight: 700;
                        width: 100px;
                        text-align: right;
                        line-height: 42px;
                    }
                    dd{
                        flex: 1;
                        display: flex;
                        flex-wrap: wrap;
                        button{
                            width: 132px;
                            height: 42px;
                            margin-left: 20px;
                            margin-bottom: 20px;
                            border-radius: 4px;
                            border: 1px solid #e4e4e4;
                            background: #f5f5f5;
                            color: #999;
                            text-align: center;
                            line-height: 40px;
                        }
                        button.active{
                            border-color: #27ba9b;
                            background: #27ba9b;
                            color: #fff;
                        }
                    }
                }
            }
        }
    .goods-aside{
        width: 280px;
        min-height: 1000px;
        .goods-hot{
            h3{
                height: 70px;
                background: #e26237;
                color: #fff;
                font-size: 18px;
                line-height: 70px;
                padding-left: 25px;
                margin-bottom: 10px;
                font-weight: 400;
            }
            div{
                a{
                    display: block;
                    background: #fff;
                    width: 100%;
                    margin-bottom: 10px;
                    padding: 20px 30px;
                    text-align: center;
                    transition: all .5s;
                    img{
                        width: 200px;
                        height: 200px;
                    }
                    p{
                        padding-top: 10px;
                        margin: 0 10px;
                    }
                    .name{
                        font-size: 16px;
                    }
                    .desc{
                        color: #999;
                        height: 29px;
                    }
                    .price{
                        color: #cf4444;
                        font-size: 20px;
                    }
                }
            }
        }
    }
}
// :deep(.el-breadcrumb__separator){
//     color: red;
// }
:deep(.el-breadcrumb__inner.is-link:hover) {
    color: #27ba9b;
}
</style>